<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        WebStorage（js本地存储）：
        浏览器通过Window.sessionStorage和Window.localStorage属性来是实现本次存储机制
        存储内容一般支持5MB左右（具体看不同的浏览器）

        相关API:
        xxxStorage.setItem(key,value) 该方法接受一个键和值作为参数，会把键值对天道本地存储中
        如果键存在赋值不同则更新其对应值
        xxxxStorage.getItem(key) 接受一个参数作为key获取key所对应的值
        xxxStorage.removeItem(key) 接受一个key 按照key将存储的内容删除
        xxxStorage.clear(); 该方法会清空存储中的所有数据

        备注：
        sessionStorage与loaclStorage的用法一模一样：
        区别就是
       sessionStorage存储的数据会随着浏览器窗口关闭而消失
       localStorage存储的内容要手动清除才会显示
       如果使用getItem()获取值的时候没有返回的null
       且JSON.parse(null)结果依然为null
    


     -->
    <button onclick="saveData()">点我保存数据</button>
    <button onclick="readData()">点我读取数据</button>
    <button onclick="deleteData()">点我删除数据</button>
    <button onclick="deleteAllData()">点我清空数据</button>
    <script>
        let person = {name:'张三',age:18}

        function saveData(){ //存储数据
            //key value 
            localStorage.setItem('msg',"localStorage");
            localStorage.setItem('person',JSON.stringify(person));
            // localStorage.setItem('msg',"sssss");
        }

        function readData(){//读取数据
            console.log(localStorage.getItem('msg'));
            const person = localStorage.getItem('person');
            console.log(JSON.parse(person));//字符串转为对象
        }

        function deleteData(){//删除数据
            localStorage.removeItem('msg');
            localStorage.removeItem('person');
           /*  sessiontorage.removeItem('msg');
            sessionStorage.removeItem('person'); */
        }

        function deleteAllData(){//清空数据
            localStorage.clear();
            // sessionStorage.clear();
        }

    </script>
</body>
</html>